<!--
 * @Author: your name
 * @Date: 2021-04-22 13:52:52
 * @LastEditTime: 2021-04-22 14:51:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-todolist\src\components\Delete.vue
-->
<template>
  <ul class="list-group">
    <li
    class="list-group-item  d-flex align-item-center justify-content-between"
    v-for="item in dones"
    :key="item.id"
    >
    {{item.text}}
    </li>
  </ul>
  <button class="btn btn-danger float-right mt-4" type="button" @click="clear(TodoItemState.DONE)">清除所有</button>
</template>

<script>
import { defineComponent } from 'vue'
import { mapGetters } from 'vuex'
import { utils } from '@/common/utils'

export default defineComponent({
  name: 'Delete',
  setup () {
    const { clear, TodoItemState } = utils()
    return {
      clear,
      TodoItemState
    }
  },
  computed: {
    ...mapGetters(['dones'])
  }
})
</script>
<style lang="scss" scoped>
</style>
